<template>
	<view class="member_container">
		<view v-for="(item, index) in itemData" :key="item.id">
			<!-- 顶部横线线条 -->
			<view class="top_line" :style="{ width: index == itemData.length - 1 ? '0' : '100%' }"></view>
			<view class="item_box">
				<!-- 成员节点 -->
				<view class="member_item">
					<!-- 子级入口竖线 -->
					<view class="top_x_line"></view>
					<view class="member_card" @tap="itemClick(item)">
						<view class="flex flex-center">
							<!-- 头像 可根据数据的性别或者其他自定义字段扩展差异化头像 isLife：是否建在，死亡成员灰度渲染 -->
							<view class="avatar">
								<image  v-if="item.gender == '0'" src="@/static/girl.jpeg" mode="aspectFill"
									:style="{ 'filter': !item.isLife || item.isLife == '0' ? 'grayscale(100%)' : 'grayscale(0%)' }"></image>
								<image v-else src="@/static/boy.jpeg" mode="aspectFill"
									:style="{ 'filter': !item.isLife || item.isLife == '0' ? 'grayscale(100%)' : 'grayscale(0%)' }"></image>
								
							</view>
						</view>
						<view class="level">
							<view class="level_label">{{ item.relation }}</view>
						</view>
						<view class="name">{{ item.name }}</view>
						<view class="die_tag" v-if="!item.isLife || item.isLife == '0'">去世</view>
					</view>
					<!-- 下级出发线 -->
					<view class="go_line" v-if="item.children && item.children.length"></view>
					<!-- 折叠按钮 -->
					<view  class="fold_btn" v-if="item.children && item.children.length" @tap="foldItem(item)">
						<!-- #ifdef MP-WEIXIN -->
						<image src="@/static/add.png" class="icon" v-if="item.fold"></image>
						<image src="@/static/minus.png" class="icon" v-else></image>
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<image src="../static/add.png" class="icon" v-if="item.fold"></image>
						<image src="../static/minus.png" class="icon" v-else></image>
						<!-- #endif -->
					</view>
				</view>
				<!-- 成员配偶节点 -->
				<view v-if="item.spouse && item.spouse.length" class="member_item">
					<view class="top_x_line_no_bg"></view>
					<view class="member_card" v-for="sItem in item.spouse" :key="sItem.key" @tap="() => { itemClick(sItem) }">
						<view class="flex flex-center">
							<view class="avatar">
								<image v-if='sItem.gender == "0"' src="@/static/girl.jpeg" mode="aspectFill"
									:style="{ 'filter': !sItem.isLife || sItem.isLife == '0' ? 'grayscale(100%)' : 'grayscale(0%)', }"></image>
								<image v-else src="@/static/boy.jpeg" mode="aspectFill"
									:style="{ 'filter': !sItem.isLife || sItem.isLife == '0' ? 'grayscale(100%)' : 'grayscale(0%)', }"></image>
							</view>
						</view>
						<view class="level">
							<view class="level_label">{{ sItem.relation }}</view>
						</view>
						<view class="name">{{ sItem.name }}</view>
						<view class="die_tag" v-if="!sItem.isLife || sItem.isLife == '0'">去世</view>
					</view>
				</view>
			</view>
			<!-- 下级节点 -->
			<view v-if="item.children && item.children.length && !item.fold">
				<Item :itemData="item.children" @check="itemClick"></Item>
			</view>
		</view>
	</view>
</template>

<script>
	import Item from "./item.vue"
	export default {
		name: 'Item',
		components: { Item },
		props: {
			itemData: {
				type: Array
			},
		},
		data() {
			return {}
		},
		watch: {},
		computed:{},
		methods: {
			foldItem(item){
				this.$set(item, 'fold', item.fold ? false : true)
				// 某些场景下数据监听异常时 强制刷新视图内容
				this.$forceUpdate()
			},
			itemClick(item){
				this.$emit('check', item)
			}
		},
		mounted() {}
	}
</script>

<style scoped lang="less">
	.die_tag{
		position: absolute;
		top: 0;left: 0;
		background-color: #dcdcdc;
		color: #666;
		width: 80rpx;
		height: 45rpx;
		line-height: 45rpx;
		border-radius: 5rpx;
		text-align: center;
		font-size: 26rpx;
	}
	.avatar{
		width: 120rpx;
		height: 120rpx;
		margin: 14rpx auto 0;
		border-radius: 100rpx;
		overflow: hidden;
		border: 1px solid #f1f1f1;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.level{
		position: relative;
		z-index: 924;
		margin-top: -15rpx;
		display: flex;
		justify-content: center;
		.level_label{
			color: #333;
			font-size: 24rpx;
			padding: 0 20rpx;
			background-color: #F4F0ED;
			border-radius: 100rpx;
		}
	}
	.name{
		text-align: center;
		font-size: 26rpx;
		color: #333;
		margin: 15rpx 0 10rpx;
	}
	.top_line{
		height: 2rpx;
		background-color: #ccc;
		margin-left: 95rpx;
		width: 100%;
		margin-top: -28rpx;
		border-top-right-radius: 10rpx;
	}
	.member_container{
		display: flex;
	}
	.item_box{
		display: flex;
	}
	.top_x_line{
		height: 55rpx;
		width: 2rpx;
		background-color: #ccc;
		margin: 0 auto;
	}
	.top_x_line_no_bg{
		height: 55rpx;
		width: 2rpx;
		margin: 0 auto;
	}
	.member_card{
		min-width: 170rpx;
		padding: 35rpx 0 25rpx;
		border: 1px solid #dcdcdc;
		border-radius: 10rpx;
		margin: 0 10rpx;
		position: relative;
		background-color: #FFF;
		box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	.go_line{
		height: 40rpx;
		width: 2rpx;
		background-color: #ccc;
		margin: 0 auto;
	}
	.fold_btn{
		width: 50rpx;
		margin: 0 auto;
		background-color: #FFF;
		border-radius: 100rpx;
		position: relative;
		z-index: 999;
		.icon{
			width: 50rpx;
			height: 50rpx;
		}
	}
</style>